<template>
  <globle-linear-border>
    <div class="controller-bar">
      <div class="weeks">
        <el-icon :size="28" @click="onWeekMinus">
          <Minus />
        </el-icon>
        <article>第 {{ pageQuery.week }} 周</article>
        <el-icon :size="28" @click="onWeekAdd">
          <Plus />
        </el-icon>
      </div>
      <div class="searchBox">
        <el-form :inline="true">
          <el-form-item label="学年">
            <el-select v-model="pageQuery.schoolYear" placeholder="选择学年搜索">
              <el-option v-for="item in schoolYearList" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="学期">
            <el-select v-model="pageQuery.stage" placeholder="选择学期搜索">
              <el-option label="第1学期" :value="1" />
              <el-option label="第2学期" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <section>
              <el-button type="primary" icon="Search" @click.stop="getData">搜 索</el-button>
              <el-button type="warning" icon="RefreshRight" @click.stop="onReset">重 置</el-button>
            </section>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </globle-linear-border>
  <globle-linear-border class="table-content">
    <course-table class="course-table" v-if="courseTableData" :data="courseTableData" :open-type="openType"></course-table>
  </globle-linear-border>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import CourseTable, { courseTableType } from '../../../../components/courseTable/Index.vue';
import { useAPI } from '../../../../request/api';
import { useUserStore } from '../../../../store/user';
import { useUtils } from '../../../../utils'
import { ICourseTable, ICourseTableParams, APIData, ISchoolYearStage } from '../../../../type';
const api = useAPI();
const userStore = useUserStore();

onMounted(() => {
  schoolYearList.value = utils.getStuSchoolYear(Number(userStore.userInfo.grade));
  // console.log('schoolYearList.value',schoolYearList.value);
  
  onReset();
});

const schoolYearList = ref([] as { label:string; value:string }[]);
const utils = useUtils();
const courseTableData = ref([] as ICourseTable[]);
const openType = ref(courseTableType.default);
const pageQuery = reactive<ICourseTableParams>({
  workId: '',
  stage: 1,
  week: 1,
  schoolYear: '2019-2020',
  // grade: userStore.userInfo.grade,
  studentId: userStore.userInfo.studentId
})

// console.log('userStore.userInfo',userStore.userInfo);
// console.log('pageQuery',pageQuery);


const onReset = () => {
  const schoolYearStage:ISchoolYearStage = utils.getNowSchoolYearStage();
  pageQuery.schoolYear = schoolYearStage.schoolYear;
  pageQuery.stage = Number(schoolYearStage.stage);
  getData();
}

const onWeekMinus = () => {
  if (pageQuery.week == 1) return;
  pageQuery.week--;
  getData();
}

const onWeekAdd = () => {
  if (pageQuery.week == 20) return;
  pageQuery.week++;
  getData();
}

const getData = async () => {
  const res: APIData = await api.course.courseTable(pageQuery);
  if (res.code === 200) courseTableData.value = res.data;
  else ElMessage.error(res.message);
  // console.log(res);
  return res.code;
};

// const getStuSchoolYear = () => {
//   const grade = Number(userStore.userInfo.grade);
//   for (let index = grade; index < grade + 4; index++) {
//     schoolYearList.value.unshift({label: `${index}-${index+1}学年`,value:`${index}-${index+1}`})
//   }
// }
</script>

<style lang="scss" scoped>
.controller-bar {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;

  .searchBox {
    padding-top: 16px;
    &-item {
      margin-right: 10px;
    }

    section {
      display: flex;

      :deep(.el-color-picker) {
        margin-left: 10px;
      }
    }

    :deep(.el-input__wrapper) {
      width: 200px;
    }
  }

  .weeks {
    display: flex;

    article {
      width: 92px;
      font-size: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 8px;
      cursor: default;
      user-select: none;
    }

    .el-icon {
      margin: 8px;
      cursor: pointer;
      user-select: none;
      // transition: all 0.2s;
    }

    // .el-icon:hover {
    //   transform: translateY(-4px);
    //   transition: all 0.2s;
    // }
  }
}

.table-content {
  // height: 100%;
  height: calc(100% - 80px);
  // display: flex;
  // flex-direction: column;
  margin-top: 16px;

  // justify-content: space-between;

  .course-table {
    padding: 16px;
    overflow: auto;
    // padding-top: 0;
    // height: calc(100% - 60px);
  }
}
</style>
